<template>
	<div class="container">
		<el-row type="flex"></el-row>
		<el-row>
		<el-table :data="goodsData" style="width: 100%" @selection-change="selectionSelect" max-height="650">
			>
			<el-table-column prop="id" label="ID" type="selection" width="42" />
			<el-table-column prop="cover" label="商品">
				<template #default="scope">
					<goods-info-item :row="scope.row" :baseUrl="baseUrl" />
				</template>
			</el-table-column>
			<el-table-column prop="price" label="价格" width="100">
				<template #default="scope">
					<div class="goods-info page-shop-goods-price-box">
						<div class="price">
							<div>{{ getMoneyByMinute(scope.row.min_price) }}</div>
							<div v-show="scope.row.min_price != scope.row.max_price">
								{{ getMoneyByMinute(scope.row.max_price) }}
							</div>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="stock" label="库存" width="100" />
			<el-table-column prop="status" label="状态" width="80">
				<template #default="scope">
					{{ scope.row.status == 1 ? "上架" : "仓库" }}
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="200" v-if="type !== 'select'">
				<template #default="scope">
					<el-button @click.prevent="deleteRow(scope.$index)" type="text" size="small">
						移除
					</el-button>
					<el-button
						@click.prevent="upRowSort(scope.$index)"
						type="text"
						size="small"
						v-show="isShowSortBtn"
						:disabled="scope.$index === 0"
					>
						排序上
					</el-button>
					<el-button
						@click.prevent="downRowSort(scope.$index)"
						type="text"
						size="small"
						v-show="isShowSortBtn"
						:disabled="scope.$index === (goodsData.length-1)"
					>
						排序下
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		</el-row>
	</div>
</template>

<script>
import { ElMessageBox } from "element-plus";

export default {
	name: "select-goods-table",
	components: { },
	props: {
		isShowSortBtn: { type: Boolean, default: false }
	},
	emits: ["select"],
	data() {
		return {
			type: "",
			baseUrl: "",
			goodsData: []
		};
	},
	mounted() {
		this.getBaseUrl();
	},
	methods: {
		async getBaseUrl() {
			this.baseUrl = await this.$TOOL.getBaseUrl(this.$API);
			console.log(this.baseUrl);
		},
		getMoneyByMinute(_val) {
			return this.$TOOL.getMoneyByMinute(_val);
		},
		selectionSelect(selections) {
			this.$emit("select", selections);
		},
		deleteRow(index) {
			const that = this;
			ElMessageBox.confirm("确认删除吗？", "提示", { type: "warning" })
				.then(() => {
					that.goodsData.splice(index, 1);
				})
				.catch(() => {});
		},
		initData(_type, _baseUrl, _goodsData) {
			this.baseUrl = _baseUrl;
			this.type = _type;
			this.goodsData = _goodsData;
		},
		swapItems(arr, index1, index2) {
			arr[index1] = arr.splice(index2, 1, arr[index1])[0];
			return arr;
		},
		upRowSort(index) {
			if (index === 0) {
				return;
			}
			this.swapItems(this.goodsData, index, index - 1);
		},
		downRowSort(index) {
			if (index === this.goodsData.length - 1) {
				return;
			}
			this.swapItems(this.goodsData, index, index + 1);
		}
	}
};
</script>

<style scoped></style>
